<template>
  <div class="chooseCoin">
    <header class="flex headers" :style="{ paddingTop: safeTop+'px'}">
      <!-- 搜索框 -->
      <van-cell-group class="searchBox">
        <van-field left-icon="search" placeholder="搜索币种" clearable v-model="searchText" />
      </van-cell-group>
      <!-- <van-field
        v-model="searchText"
        clearable
        placeholder="搜索币种"
        left-icon="search"
        class="searchBox"
      />-->
      <span class="span c444" @click="back">取消</span>
    </header>
    <div class="lists" v-if="tokenCurlist.length>0">
      <!-- <van-index-bar :sticky="false">
        <div v-for="(item,i) in 10" :key="i">
          <van-index-anchor index="A">A</van-index-anchor>
          <van-cell title="文本" />
          <van-cell title="文本" />
          <van-cell title="文本" />
        </div>
      </van-index-bar>-->
      <div v-if="type=='OTC'">
        <div v-for="(item,i) in tokenCurlist" :key="i">
          <!-- <van-index-anchor index="A">A</van-index-anchor> -->
          <van-cell  :title="item.currency" @click="chooseCurrency(item.currency)" />
        </div>
      </div>
      <div v-else>
        <div v-for="(item,i) in tokenCurlist" :key="i">
          <!-- <van-index-anchor index="A">A</van-index-anchor> -->
          <van-cell
            class="c999"
            v-if="item.currency=='EOS'
         || item.currency=='XRP'
          || item.currency=='DASH'
          || item.currency=='BCH'
          || item.currency=='ETC'
          || item.currency=='LTC'
          "
            :title="item.currency"
            value="暂停充提"
          />
          <van-cell v-else :title="item.currency" @click="chooseCurrency(item.currency)" />
        </div>
      </div>
    </div>
    <nodata class="mar_t_20" v-else :title="'暂无币种'"></nodata>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  components: {},
  computed: {
    safeTop() {
      return this.$store.state.safeAreaTop;
    },
    userId() {
      return this.$store.state.userId;
    }
  },
  watch: {
    searchText(val) {
      if (val == "") {
        //恢复原来的数据
        this.tokenCurlist = this.copyTokenCurlist;
      } else {
        val = val.toUpperCase();
        let copylist = this.copyTokenCurlist;
        // console.log(this.copyTokenCurlist);
        let arr = [];
        copylist.forEach(ele => {
          if (ele.currency.indexOf(val) != -1) {
            arr.push(ele);
          }
        });
        this.tokenCurlist = arr;
      }
    }
  },
  activated() {
    this.init();
    this.type = this.$route.params.type || "";
    if(this.type=='OTC'){
      this.getTabList();
    }else{
      this.getBalances();
    }
  },
  deactivated() {
    this.searchText = "";
  },
  data() {
    return {
      searchText: "", //搜索内容
      tokenCurlist: [], //主币列表
      copyTokenCurlist: [],
      type: ""
    };
  },
  methods: {
    ...mapActions([
      "setnavTitle",
      "setnavBarState",
      "settabBarState",
      "setbackRouter",
      "setnavBarArrow",
      "setnavBarBgColor",
      "setnavBarShowRight",
      "setCurrency"
    ]),
    init() {
      this.setnavTitle("详细信息");
      this.setbackRouter("");
      this.setnavBarState(false);
      this.settabBarState(false);
      this.setnavBarArrow(true);
    },
    //返回上一页
    back() {
      this.$router.go(-1);
    },
    //查询资产列表
    getBalances() {
      let data = {
        member: this.userId,
        balanceType: "BALANCE_BB"
      };
      this.$get("member/balance/getBalances", data).then(res => {
        if (res && res.status == "SUCCEED" && res.result) {
          this.copyTokenCurlist = res.result || [];
          this.tokenCurlist = res.result || [];
        }
      });
    },
    getTabList() {
      this.$util.showLoading();
      this.$post("otc/order/currencyList", {}).then(res => {
        this.Toast.clear();
        if (res && res.status == "SUCCEED") {
          this.copyTokenCurlist = res.result || [];
          this.tokenCurlist = res.result || [];
        }
      });
    },
    //选择币种
    chooseCurrency(val) {
      // XRP   DASH   EOS

      this.setCurrency(val);
      setTimeout(res => {
        this.back();
      }, 300);
    }
  }
};
</script>
<style lang="scss">
@import "@/assets/scss/theme.scss";

.chooseCoin {
  .van-cell:not(:last-child)::after {
    border: none;
  }
  .van-field__control {
    &::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #888;
      font-size: 12px;
    }
  }
  .van-index-bar__sidebar {
    display: none;
  }
  .van-index-anchor {
    background: #f8f7fd;
  }
  .searchBox {
    .van-cell {
      // background: #f8f7fd!important;
      @include base-background-serch();
    }
  }
  .van-hairline--top-bottom::after {
    border: none;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/theme.scss";

.chooseCoin {
  height: 100%;
  display: flex;
  flex-direction: column;
  @include base-background();

  .headers {
    padding-right: 15px;
    align-items: center;
    // background: #f8f7fd;
    // @include base-background();
    @include base-background-serch();

    .span {
      font-size: 12px;

      margin-left: 15px;
    }
  }
  .searchBox {
    flex: 1;
  }
  .lists {
    flex: 1;
    overflow-y: auto;
  }
}
</style>